<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="../js/vue.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <body>
        <div id="app">
            <div class="add">
                编号:<input type="text" v-model='add.id' ref='tp'>
                品牌名称: <input type="text"  v-model ='add.name'>
                <input type="button" value="添加" @click='adds'>
            </div>
            <div class="add">
                品牌名称:
                <input type="text" placeholder="请输入搜索条件" v-setcolor>
            </div>
            <div>
                <table class="tb">
                    <tbody>
                        <tr>
                            <th>编号</th>
                            <th>品牌名称</th>
                            <th>创立时间</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for='(value,index) in arr' :key='index'>
                            <td>{{value.id}}</td>
                            <td>{{value.name}}</td>
                            <td>{{value.time | formattime}}</td>
                            <td>
                                <a href="#" @click='del(index)'>删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            // 自定义时间格式过滤器
            Vue.filter('formattime',(time)=>{
                time = new Date(time);//防御性编程
                let year = time.getFullYear();
                let month = time.getMonth()+1;
                let day = time.getDate();
                let hours = time.getHours();
                let min = time.getMinutes();
                let sec = time.getSeconds();
                return year+'-'+month+'-'+day+' '+hours+':'+min+':'+sec;
            })
            // 自定义指令
            Vue.directive('setcolor',{
                inserted(el,binding){
                    el.style.color='red'
                }
            });
            var vm = new Vue({
                el : '#app',
                mounted(){
                    this.$refs.tp.focus()
                },
                data : {
                    add : {
                        id :'',
                        name : '',
                        time : new Date().getTime(),
                    },
                    arr : [
                        {
                            id :1,
                            name : '佩奇',
                            time : new Date()
                        },
                        {
                            id :2,
                            name : '乔治',
                            time : new Date()
                        },
                        {
                            id :3,
                            name : '苏西',
                            time : new Date()
                        },
                    ]
                },
                methods : {
                    adds(){
                        this.arr.push({...this.add})
                    },
                    del(index){
                        this.arr.splice(index,1)
                    }
                }
            })
        </script>
    </body>

</html>